<template>
  <div class="full-screen-page">
    <!-- 页面内容 -->
    <div class="custom-title">
      <div class="title-left">
        <img src="../..//assets/svg/规划清单.svg" />
        <div>规划清单</div>
        <a-icon type="right" />
      </div>
      <div class="title-content">
        <span class="meta">F-ADLM【F-ADLM【应用开发过程管理】</span>
        <span style="margin: 0 8px; color: #d9d9d9">|</span>
        <span class="meta">GCGH-000023</span>
        <span style="margin: 0 8px; color: #d9d9d9">|</span>
        <span class="meta">人行任务</span>
      </div>
      <div class="title-right">
        <a-input-search
          placeholder="请输入"
          style="width: 206px"
          @search="onSearch"
        />
        <a-select
          default-value="筛选"
          style="width: 72px"
          @change="handleChange"
        >
          <a-select-option value="1"> 筛选 </a-select-option>
        </a-select>
        <a-config-provider :auto-insert-space-in-button="false">
          <a-button @click="clickBack">返回</a-button>
        </a-config-provider>
      </div>
    </div>
    <standard-table
      :infoShow="false"
      :size="size"
      :bordered="true"
      :columns="columns"
      :dataSource="dataSource"
      @change="onChange"
      :pagination="false"
      :scroll="{ x: true, y: minHeight }"
    />
  </div>
</template>

<script>
import { request } from "@/utils/request";
import { architectColumns } from "../../pages/projectManagement/index";
import StandardTable from "@/components/table/StandardTable";

const minHeight = window.innerHeight - 350;

export default {
  // 组件选项
  name: "MultiEdit",
  props: ["engineeringTitle", "projectNo", "title"],
  components: {
    StandardTable,
  },
  data() {
    return {
      columns: architectColumns,
      dataSource: [],
      selectedRows: [],
      minHeight,
      size: "middle",
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    clickBack() {
      this.$router.push("/architect");
    },
    onSearch() {
      console.log("search log");
    },
    handleChange() {
      console.log("handleSelectChange log");
    },
    onChange() {
      this.$message.info("表格状态改变了");
    },

    getData() {
      request(process.env.VUE_APP_API_BASE_URL + "/planList", "get").then(
        (res) => {
          const { list } = res?.data?.data ?? {};
          this.dataSource = list;
        }
      );
    },
  },
};
</script>

<style scoped lang="less">
/* 如果需要，可以在这里添加特定于此组件的样式 */
/* 全局样式或组件内样式 */
html,
body,
#app,
.full-screen-page {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow-x: hidden; /* 防止水平滚动条 */
  
}

.full-screen-page {
  display: flex; /* 或者其他布局方式，取决于你的需求 */
  /* 其他样式 */
  flex-direction: column;
}

.custom-title {
  height: 52px;
  width: 100%;
  display: flex;
  align-items: center;

  .title-left {
    background: #f7f7f7;
    width: 150px;
    font-size: 16px;
    color: #165dff;
    font-weight: 700;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 16px;
    gap: 8px; /* 子元素之间的间隔 */
    img {
      height: 20px;
      width: 20px;
    }
  }

  .title-content {
    font-size: 18px;
    color: #333333;
    line-height: 26px;
    padding: 14px 22px;
    .meta {
      font-weight: 700;
    }
  }

  .title-right {
    margin-left: auto;
    margin-right: 19px;
    display: flex;
    align-items: center;
    gap: 16px; /* 子元素之间的间隔 */
  }
}
</style>
